<template>
  <div class="w-full h-600px" ref="chartRef"></div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Coronavirus',
  });
</script>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import data from './data.json';

  const chartRef = ref();

  onMounted(() => {
    const chart = echarts.init(chartRef.value);

    // 注册地图
    echarts.registerMap('china', data);

    const chinaData = data.features.map((item) => {
      return {
        name: item.properties.name,
        value: item.properties['新增确诊'],
      };
    });

    const option = {
      series: {
        name: '全国新冠疫情数据',
        type: 'map',
        map: 'china',
        data: chinaData,
        zoom: 1.5,
        top: 150,
        label: {
          show: true,
        },
        emphasis: {
          label: {
            fontSize: 20,
          },
          itemStyle: {
            areaColor: '#F3B329',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      visualMap: {
        type: 'piecewise',
        // 颜色的设置  dataRange
        textStyle: { color: '#ccc' },
        top: 'center',
        pieces: [
          { min: 16 },
          { min: 12, max: 16 },
          { min: 8, max: 12 },
          { min: 4, max: 8 },
          { min: 1, max: 4 },
          { value: 0 },
        ],
        show: true,
      },
      tooltip: {
        trigger: 'item',
      },
    };

    chart.setOption(option);
  });
</script>
